<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      border: 1px solid gray;
      width: 1300px;
      border-radius: 0 20px 0 20px;
      padding: 15px;
      margin: auto;
      color: gray;
    }

    .box p span {
      color: blue;
    }

    .box2 {
      margin-top: 20px;
    }

    .box2 span {
      margin-right: 100px;
    }
  </style>
</head>

<body>


  <script>

    let obj = {
      goods: '小米（MI）',
      name: '小米10青春版',
      num: 123456789,
      weight: '0.55kg',
      address: '中国大陆'
    }

    obj.name = '小米10 PLUS'
    obj.color = '粉色'
    console.log(obj.goods)
    console.log(obj.name)
    console.log(obj.num)
    console.log(obj.weight)
    console.log(obj.address)

    document.write(`
    <div class="box">
    <p>品牌：<span>${obj.goods}</span></p>
    <div class="box2">
      <span>商品名称：${obj.name}</span>
      <span>商品编号：${obj.num}</span>
      <span>商品毛重：${obj.weight}</span>
      <span>商品产地：${obj.address}</span>
      <span>商品颜色：${obj.color}</span>
    </div>
  </div>
    `)

  </script>
</body>

</html>